<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选或全不选</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			table {
				width:600px;
				margin:  200px auto;
				border-spacing: 0;
				border-collapse: collapse;
				border:1px solid #ccc;
			}
			thead tr {
				width: 100%;
				height: 30px;
				line-height: 30px;
				font-weight: 400;
			}
			
			thead tr th {
				width: 200px;
				font-weight: 400;
				border: 1px solid #ccc;
			}
		
			thead tr th:nth-child(1) input,label{
				cursor: pointer;
			}
			tbody tr {
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			tbody tr td {
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>
						<input type="checkbox" name="c_All" id="c_All" value="" />
						<label for="c_All">全选/全不选</label>
					</th>
					<th>Header</th>
					<th>Header</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" name="" id="" class="part" value="" />
					</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" name="" id="" class="part" value="" />
					</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" name="" id="" class="part" value="" />
					</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
			</tbody>
		</table>
		<script type="text/javascript">
			//获取全选按钮对象
			var c_All = document.querySelector('#c_All');
			//获取表体中的复选框
			var ipts = document.querySelectorAll('.part');
			//checked的值是true/false
			c_All.onclick = function() {
				console.log(this.checked)
				if(this.checked) {
					//选中了
					for(var i = 0; i < ipts.length; i++) {
						ipts[i].checked = true;
					}
				}else {
					for(var i = 0; i < ipts.length; i++) {
						ipts[i].checked = false;
					}
				}
			}
			
			//设置点击表体中的复选框中的点击事件，如果有一个没选中的话，全选按钮都不勾选
			
			for(var i = 0 ; i < ipts.length; i++) {
				var flag = true;
				//绑定事件
				ipts[i].onclick = function() {
					for(var j = 0; j < ipts.length; j++) {
						if(!this.checked) {
							//有没有勾选上的
							flag = false;
							break;
						}
					}
					
					c_All.checked = flag;
				}
			}
			
			
		</script>
	</body>
</html>
